<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<div> 
		<input v-model="parentMsg"> 
		<br> 
		<child v-bind:my-message="parentMsg"></child> 
	</div>
</div>
<script>
	/**
	 * 类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 
	 * 绑定动态 props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：
	 */
	Vue.component('child',{
		
		props : ['my-message'],
		template : '<span @click="doclick">{{myMessage}}</span>',
		methods : {
			doclick : function(){
				console.log(this.myMessage);
			}
		}
	});
	var vm = new Vue({
		el : '#root',
		data : {
			parentMsg : ''
		}
	});
</script>	
</body>
</html>